<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<!-- 内部样式 -->
		<style tyle="text/css">
			*{    /* 通配符,指所有的标签.初始化所有标签的内边距和外边距 */
				margin:0;
				padding:0;
			}
			.box{
			width:300px;
			height:300px;
			border:1px solid red;
			padding:50px 40px 30px 20px;   /* 分别对应:上右下左 顺时针方向 */
			/* padding:50px 30px 10px; */   /* 分别对应:上  左右 下 */
			/* padding:50px 20px ;  分别对应:上下 左右 */
			/* padding:50px;   四个方位都是50px */
			/* margin-top:100px;
			margin-bottom:50px;
			margin-left:100px; */
			margin:50px;
		}
		.box2{
			width:200px;
			height:200px;
			border:1px solid green;
			margin:auto;    /* 盒子水平居中 */
		}
		.box3{
			width:200px;
			height:200px;
			border:1px dotted pink;
			margin:auto;
			padding:50px 40px;
		}
		</style>
	</head>
	<body>
		<!-- 盒子模型：
			内容content
			内边距padding（会把盒子撑大）
			边框border
			外边距margin :盒子与盒子之间的距离-
			外边距的应用：1.可以让块级盒子水平居中--第一盒子要有宽度；第二给盒子左右外边距
						2.初始所有标签的内外边距->
		<!-- 	方位词：top上，bottom下，right右，left左，center居中 -->
		
		<div class="box">
			hello 我喜欢你!
		</div>
		<div class="box2">
			hello  box！！
		</div>
		<div class="box3">
			王滔是美女！！！
		</div>
	</body>
</html>
